<script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui';
import type { BasicOption } from '@vben/types';

import { computed, markRaw, h } from 'vue';

import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { useAuthStore } from '#/store';
import Captcha from '../captcha/image-button.vue';

defineOptions({ name: 'Login' });

const authStore = useAuthStore();
const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '租户编码 0000 或 8888 账号 admin 密码 123456 ',
      },
      dependencies: {
        disabled: true,
        triggerFields: [''],
      },
      fieldName: 'desc',
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '租户编码',
      },
      dependencies: {
        show: true,
        triggerFields: [''],
      },
      fieldName: 'tenantCode',
      label: '租户编码',
      defaultValue: '0000',
      rules: z
        .string()
        .max(6, { message: '租户编码不能为空' })
        .min(4, { message: '租户编码不能为空' }),
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: $t('authentication.usernameTip'),
      },
      fieldName: 'username',
      label: $t('authentication.username'),
      defaultValue: 'admin',
      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
    },
    {
      component: 'VbenInputPassword',
      componentProps: {
        placeholder: $t('authentication.password'),
      },
      fieldName: 'password',
      label: $t('authentication.password'),
      defaultValue: '123456',
      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '验证码',
      },
      fieldName: 'code',
      label: '验证码',
      suffix: () => h(Captcha),
      rules: z
        .string()
        .max(4, { message: '验证码不能为空' })
        .min(4, { message: '验证码不能为空' }),
    },
  ];
});
</script>

<template>
  <AuthenticationLogin
    :form-schema="formSchema"
    :loading="authStore.loginLoading"
    @submit="authStore.authLogin"
  />
</template>
